<template>
	<view class="page-size-ios flex-box">
		<view class="flex-none">
			<CustomNavbar hideBack></CustomNavbar>
		</view>
		<view class="flex-none search-box">
			<CustomSearch :word.sync="param.keyword" @onSearch="onSearch"></CustomSearch>
		</view>
		<view class="flex-none filter-box">
			<CustomFilter :filterList="filterList" @onFilter="onFilter" buttonWord="签名" buttonMove="4" filterPadd="6rpx 20rpx 0"></CustomFilter>
		</view>
		<view class="flex-none">
			<view style="width: 100%;height:60vw">
				<CustomSwiper :periodTime="10000"></CustomSwiper>
			</view>
		</view>
		<view class="flex-auto">
			<ScrollList ref="scrollList" @getListData="getListData" isRefresh>
				<view class="grid-list">
					<view class="grid-item" v-for="item in moreList" :key="item.id">
						<text>{{item.name}}</text>
					</view>
				</view>
			</ScrollList>
		</view>
	</view>
</template>

<script>
	import CustomNavbar from "@/components/CustomNavbar.vue"
	import CustomSwiper from "@/components/CustomSwiper.vue"
	import CustomSearch from "@/components/CustomSearch.vue"
	import CustomFilter from "@/components/CustomFilter.vue"
	import ScrollList from "@/components/ScrollList.vue"
	export default {
		components: {
			CustomNavbar,
			CustomSwiper,
			CustomSearch,
			CustomFilter,
			ScrollList,
		},
		data() {
			return {
				filterList: [
					{
						lable: '东方曜', id: 0,
						list: [
							{name: '星辰之子', id: 1},
							{name: '云鹰飞将', id: 2},
							{name: '李逍遥', id: 3},
							{name: '苍雷引', id: 4},
						]
					},
					{
						lable: '孙悟空', id: 0,
						list: [
							{name: '地狱火', id: 1},
							{name: '全息碎影', id: 2},
							{name: '孙行者', id: 3},
							{name: '齐天大圣', id: 4},
						]
					},
				],
				param: {keyword: ''},
				moreList: [],
			}
		},
		methods: {
			getListData(page, callback) {
				// 模拟数据请求
				setTimeout(() => {
					let list = [];
					for (let i=0; i<10; i++) {
						list.push({ name: '李逍遥'+(page*10+i), id: page*10+i });
					}
					if(page==1) this.moreList = [];
					this.moreList = this.moreList.concat(list);
					callback(this.moreList.length, 30);
				}, 800);
			},
			
			onFilter(index, row) {
				console.log(index, row)
				if(index==-2) {
					uni.navigateTo({ url: "/pages/index/signature" })
				}else{
					this.filterList[index].lable = row.name;
					this.filterList[index].id = row.id;
				}
			},
			
			onSearch() {
				this.$refs.scrollList.onReloadData();
			},
		}
	}
</script>

<style scoped>
	.page-size-ios {
		background-color: #ffffff;
	}
	.search-box {
		padding: 20rpx 14rpx;
		background-color: #ffffff;
		border-bottom: solid 1px #f7f7f7;
		position: relative;
		z-index: 4;
	}
	
	/* 宫格布局 start */
	.grid-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		padding-top: 14rpx;
		width: 700rpx;
		margin: 0 auto;
	}
	.grid-list .grid-item {
		height: 340rpx;
		background-color: #cccccc;
		display: grid;
		place-items: center;
	}
	/* 宫格布局 end */
</style>
